import ProTable from "@/components/ProComponents/ProTable";
import { ProTableOption, ProTableRequest } from "@/components/ProComponents/ProTable/types";
import { useEffect, useState } from "react";
import { Button, Tabs } from "tdesign-react";

type UserObject = { name: string; age: string, enName?: string }

const { TabPanel } = Tabs;

const ProTablePage: React.FC = () => {

  const [options, setOptions] = useState<ProTableOption<UserObject>[]>([
    {
      key: 'serial-number',
      title: '序号',
      hideInSearch: true,
      width: '60px'
    },
    {
      key: 'id',
      title: '序号',
      hideInSearch: true,
      width: '200px',
    },
    {
      key: 'name',
      title: '姓名',
      value: '我的名字',
      formOrder: 5,
      tableOrder: 4,
    },
    {
      key: 'age',
      title: '年龄',
      type: 'number',
      value: 10,
      tableOrder: 3,
      inputNumberAttrs: {
        max: 10
      }
    },
    {
      key: 'sex',
      title: '性别',
      type: 'select',
      dataSource: [{
        label: '男', value: '1'
      },
      { label: '女', value: '2' }
      ],
      hideInTable: true
    },
    {
      key: 'sex1',
      title: '性别',
      type: 'select',
      dataSource: [{
        label: '男', value: '1'
      },
      { label: '女', value: '2' }
      ],
      value: '2',
      hideInTable: true
    },
    {
      key: 'city',
      title: '市区',
      value: '淮北市',
      hideInTable: true,
      formOrder: 1
    },
    {
      key: 'date',
      type: 'date',
      title: '创建日期',
      value: '2023-10-10',
      hideInTable: true
    },
    {
      key: 'time',
      type: 'time',
      title: '创建时间',
      value: '12:12:12',
      hideInTable: true
    },

    {
      key: 'checkbox',
      title: '价格',
      type: 'checkbox',
      span: 9,
      dataSource: [
        { label: '50 元以下', value: '0' },
        { label: '50~100 元', value: '1' },
        { label: '100~200 元', value: '2' },
        { label: '200~300 元', value: '3' },
        { label: '300~400 元', value: '4' },
        { label: '400~500 元', value: '5' },
        { label: '500 元以上', value: '6' },
      ],
      value: ['1', '2'],
      hideInTable: true
    },
    {
      key: 'rangeInput',
      type: 'rangeInput',
      title: '自定义范围',
      span: 3,
      labelWidth: '120px',
      value: ['1', '2'],
      hideInTable: true
    },
    {
      key: 'dateRange',
      type: 'dateRange',
      title: '看房日期',
      span: 3,
      value: [],
      hideInTable: true
    },
    {
      key: 'timeRange',
      type: 'timeRange',
      title: '看房时间',
      span: 12,
      hideInTable: true
    },
    {
      key: 'radio',
      title: '房源类型',
      type: 'radio',
      span: 12,
      dataSource: [
        { label: '写字楼', value: '0' },
        { label: '商业店铺', value: '1' },
        { label: '公寓', value: '2' },
        { label: '居民楼', value: '3' },
      ],
      value: '1',
      hideInTable: true
    },
    {
      key: 'action',
      title: '操作',
      hideInSearch: true,
      cell: ({ row }) => {
        return <div>
          <Button size="small" variant="text" theme="primary">操作</Button>
        </div>
      }
    }
  ])

  function getLabel() {
    return Promise.resolve([
      { label: '男', value: '1' },
      { label: '女', value: '2' },
      { label: '未知', value: '3' }
    ])
  }

  useEffect(() => {
    getLabel().then(res => {
      const newOption = [...options];
      newOption[4].dataSource = res;
      setOptions(newOption);
    })
  }, [])

  function request(params: ProTableRequest<UserObject>): Promise<{ list: UserObject[], total: number }> {

    const nameList = ['刘军', '刘续', '张昂', '薛庆', '徐澳', '刘光耀', '张三', '李四', '朱森林', '杨学强', '王维武'];

    const ageList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

    const list = new Array(20).fill(null).map((item, index) => ({
      id: Math.random().toString(),
      name: nameList[Math.floor(Math.random() * nameList.length)],
      age: ageList[Math.floor(Math.random() * ageList.length)].toString(),
      enName: nameList[Math.floor(Math.random() * nameList.length)],

    }))

    return Promise.resolve({
      list,
      total: 20
    });
  }

  return <div className="h-full">
    <ProTable size="small"
      setting={
        <div>
          <Button theme="primary">添加房源</Button>
        </div>
      }
      formHeader={
        <div className="w-full">
          <Tabs
            addable={false}
            defaultValue="1"
            dragSort={false}
            placement="top"
            size="medium"
            theme="normal"
          >
            <TabPanel
              destroyOnHide
              label="出售"
              removable={false}
              value="1"
            >

            </TabPanel>
            <TabPanel
              destroyOnHide
              label="出租"
              removable={false}
              value="2"
            >

            </TabPanel>
          </Tabs>
        </div>
      } rowKey="id" request={request} options={options} />
  </div>
}

export default ProTablePage;